<template>
  <div
    :class="prefixCls"
    class="border border-[#F2F2F2] border-solid rounded-lg flex flex-col overflow-hidden"
  >
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      class="editor flex-1 h-full overflow-y-auto"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { message } from "ant-design-vue";
import storage from "store";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { i18nChangeLanguage } from "@wangeditor/editor";
export default {
  name: "WangEditor",
  components: { Editor, Toolbar },
  props: {
    prefixCls: {
      type: String,
      default: "ant-editor-wang",
    },
    value: {
      type: String,
    },
    placeholder: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["group-video"], // 不需要上传视频
      },
      editorConfig: {
        placeholder: this.placeholder,
        readOnly: this.disabled,
        autoFocus: true,
        maxLength: 1000,
        scoll: true,
        customAlert: (s, t) => {
          switch (t) {
            case "success":
              message.success(s);
              break;
            case "info":
              message.info(s);
              break;
            case "warning":
              message.warning(s);
              break;
            case "error":
              message.error(s);
              break;
            default:
              message.info(s);
              break;
          }
        },
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {},
        },
      },
      mode: "default", // or 'simple'
      lang: localStorage.getItem("lang").includes("zh-CN"),
    };
  },
  watch: {
    value: {
      handler(newVal) {
        this.html = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    i18nChangeLanguage(this.lang ? "zh-CN" : "en");
    this.editorConfig.MENU_CONF["uploadImage"] = {
      timeout: 5 * 1000, // 5s
      fieldName: "image",
      headers: {
        "Content-Type": "multipart/form-data",
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      maxFileSize: 10 * 1024 * 1024, // 10M
      base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
      onBeforeUpload(files) {
        return files; // 返回哪些文件可以上传
        // return false 会阻止上传
      },
      // 用户自定义上传图片
      customUpload(file, insertFn) {
        var axios = require("axios");
        var FormData = require("form-data");
        var data = new FormData();
        data.append("file", file); // file 即选中的文件
        var config = {
          method: "post",
          url: process.env.VUE_APP_BASE_API + "/v1/oss/upload", //上传图片地址
          headers: {
            token: storage.get(ACCESS_TOKEN),
            tokens: storage.get("bmwToken") || "",
            "Content-Type": "multipart/form-data",
          },
          data: data,
        };
        axios(config).then(function ({ data }) {
          let url = `${data.Url}${data.data}`; //拼接成可浏览的图片地址
          insertFn(url, "", url); //插入图片
        });
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      this.html = this.value;
    },
    onChange(editor) {
      this.$emit("change", editor.getHtml());
    },
    destroyEditor() {
      const editor = this.editor;
      if (editor == null) return;
      editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
    getContent() {
      return this.editor.getHtml();
    },
  },
  beforeDestroy() {
    this.destroyEditor();
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.ant-editor-wang {
  .editor-wrapper {
    text-align: left;
  }
}
.w-e-full-screen-container {
  z-index: 100 !important;
}
.w-e-text-placeholder {
  top: 7px !important;
}
:deep(.w-e-text-container) {
  height: 200px;
}
</style>
